<script lang="ts" setup>
import { type FileItem } from "@store/useFileStore"

const props = defineProps<{
  file?: FileItem
}>()
const $emits = defineEmits<{
  (e: "hideDetail"): void
}>()
</script>

<template>
  <transition name="detail">
    <div class="detail-box" v-if="file">
      <div class="top-box">
        <div class="left">
          <img src="/edit.svg" alt="img load error" draggable="false">
          <p>{{$t("detail.edit")}}</p>
        </div>
        <img @click="$emit('hideDetail')" class="right" src="/close.svg" alt="img load error" draggable="false">
      </div>
      <img class="t-img" :src="file.base64" alt="target img load error" draggable="false">
      <p class="title">{{$t("detail.title")}}</p>
      <input type="text" class="name" v-model="file.name" maxlength="20">
      <p class="title">{{$t("detail.wh")}}</p>
      <div class="wh-box">
        <input class="w" type="text" :value="file.width" disabled>
        <input class="h" type="text" :value="file.height" disabled>
      </div>
      <p class="title">{{$t("detail.size")}}: {{ file.size }}</p>
      <p class="title">{{$t("detail.clear")}}</p>
      <input type="text" v-model="file.expired" class="delter-time" :placeholder="($t('detail.clearTip') as string)"
        maxlength="20">
      <!-- <p class="title">{{$t("detail.description")}}</p>
            <textarea name="" id="" cols="30" rows="10" class="info" maxlength="100"
                :placeholder="($t('detail.contentTip') as string)" /> -->
    </div>
  </transition>
  <div class="mask" @click="$emit('hideDetail')" v-if="file"></div>
</template>

<style lang="scss">
@media screen and (max-width: 420px) {
  .detail-box {
    width: 100vw;
    height: 100vh;
    overflow-y: auto;
    top: 0;

    .t-img {
      max-width: 200px;
      max-height: 200px;
      object-fit: cover;
    }
  }
}

@media screen and (min-width: 421px) {
  .detail-box {
    width: 70%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    .t-img {
      max-width: 220px;
      max-height: 220px;
      object-fit: cover;
    }
  }

  .mask {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: $level3;
  }
}

.detail-box {
  position: fixed;
  overflow-y: scrolll;
  display: flex;
  flex-direction: column;
  background-color: $detailBg;
  padding: 20px;
  color: $detailColor;
  z-index: $level2;

  .top-box {
    width: 100%;
    @include vC;
    justify-content: space-between;

    img {
      width: 20px;
      height: 21px;
    }

    .left {
      @include vC;

      p {
        font-size: 20px;
        margin-left: 8px;
      }
    }

    .right {
      cursor: pointer;
    }
  }

  .t-img {
    margin: 0 auto;
    margin-top: 14px;
  }

  .title {
    font-weight: bold;
    font-size: 14px;
    text-align: left;
    margin-top: 12px;
  }

  input,
  textarea {
    width: 92%;
    height: 36px;
    margin-top: 8px;
    border: unset;
    outline: unset;
    background-color: #ecf0f1;
    padding: 0 12px;
    border-radius: 18px;
    flex-shrink: 0;
    border: 1px solid transparent;
  }



  .wh-box {
    @include vC;

    input {
      width: 80px;
    }

    .h {
      margin-left: 14px;
    }
  }

  .info {
    height: 90px;
    border-radius: 30px;
    resize: none;
    padding: 15px 15px;
    letter-spacing: 0.2;
  }

  input:focus,
  textarea:focus {
    border: 1px solid $uploadColor;
  }
}

.detail-enter-active,
.detail-leave-active {
  transition: opacity 0.3s ease;
}

.detail-enter-from,
.detail-leave-to {
  opacity: 0;
}
</style>
